<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/Strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
    <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
    <link  type="text/css"  rel="stylesheet" href="./theme/default/common.css" />
    <link type="text/css" rel="stylesheet" href="../demo.css" />

    <!-- common, all times required, imports -->    <!--REGEXP_START_REMOVE-->
	<SCRIPT src="../../String.js"></SCRIPT>
	<SCRIPT src="../../wz_jsgraphics.js"></SCRIPT>
	<SCRIPT src="../../events.js"></SCRIPT>
	<SCRIPT src="../../debug.js"></SCRIPT>
	<SCRIPT src="../../dragdrop.js"></SCRIPT>
	<SCRIPT src="../../UUID.js"></SCRIPT>
	<SCRIPT src="../../PositionConstants.js"></SCRIPT>
	<SCRIPT src="../../Graphics.js"></SCRIPT>
	<SCRIPT src="../../Color.js"></SCRIPT>
	<SCRIPT src="../../ArrayList.js"></SCRIPT>
	<SCRIPT src="../../Point.js"></SCRIPT>
	<SCRIPT src="../../Dimension.js"></SCRIPT>
	<SCRIPT src="../../Border.js"></SCRIPT>
	<SCRIPT src="../../LineBorder.js"></SCRIPT>
	<SCRIPT src="../../Figure.js"></SCRIPT>
	<SCRIPT src="../../Node.js"></SCRIPT>
    <SCRIPT src="../../VectorFigure.js"></SCRIPT>
    <SCRIPT src="../../SVGFigure.js"></SCRIPT>
	<SCRIPT src="../../Label.js"></SCRIPT>
	<SCRIPT src="../../Oval.js"></SCRIPT>
	<SCRIPT src="../../Circle.js"></SCRIPT>
	<SCRIPT src="../../Rectangle.js"></SCRIPT>
	<SCRIPT src="../../ImageFigure.js"></SCRIPT>
	<SCRIPT src="../../Port.js"></SCRIPT>
	<SCRIPT src="../../InputPort.js"></SCRIPT>
	<SCRIPT src="../../OutputPort.js"></SCRIPT>
	<SCRIPT src="../../Line.js"></SCRIPT>
	<SCRIPT src="../../ConnectionRouter.js"></SCRIPT>
	<SCRIPT src="../../NullConnectionRouter.js"></SCRIPT>
	<SCRIPT src="../../ManhattanConnectionRouter.js"></SCRIPT>
	<SCRIPT src="../../BezierConnectionRouter.js"></SCRIPT>
	<SCRIPT src="../../FanConnectionRouter.js"></SCRIPT>
	<SCRIPT src="../../Connection.js"></SCRIPT>
	<SCRIPT src="../../ConnectionAnchor.js"></SCRIPT>
	<SCRIPT src="../../ChopboxConnectionAnchor.js"></SCRIPT>
	<SCRIPT src="../../ConnectionDecorator.js"></SCRIPT>
	<SCRIPT src="../../ArrowConnectionDecorator.js"></SCRIPT>
	<SCRIPT src="../../CompartmentFigure.js"></SCRIPT>
	<SCRIPT src="../../CanvasDocument.js"></SCRIPT>
	<SCRIPT src="../../Annotation.js"></SCRIPT>
	<SCRIPT src="../../ResizeHandle.js"></SCRIPT>
	<SCRIPT src="../../LineStartResizeHandle.js"></SCRIPT>
	<SCRIPT src="../../LineEndResizeHandle.js"></SCRIPT>
	<SCRIPT src="../../Canvas.js"></SCRIPT>
	<SCRIPT src="../../Workflow.js"></SCRIPT>
	<SCRIPT src="../../WindowFigure.js"></SCRIPT>
	<SCRIPT src="../../Button.js"></SCRIPT>
	<SCRIPT src="../../ToggleButton.js"></SCRIPT>
	<SCRIPT src="../../SnapToHelper.js"></SCRIPT>
	<SCRIPT src="../../SnapToGeometry.js"></SCRIPT>
	<SCRIPT src="../../SnapToGeometryEntry.js"></SCRIPT>
	<SCRIPT src="../../SnapToGrid.js"></SCRIPT>
	<SCRIPT src="../../ToggleButton.js"></SCRIPT>
	<SCRIPT src="../../ToolGeneric.js"></SCRIPT>
	<SCRIPT src="../../ToolPalette.js"></SCRIPT>
	<SCRIPT src="../../Dialog.js"></SCRIPT>
	<SCRIPT src="../../InputDialog.js"></SCRIPT>
	<SCRIPT src="../../PropertyDialog.js"></SCRIPT>
	<SCRIPT src="../../AnnotationDialog.js"></SCRIPT>
	<SCRIPT src="../../PropertyWindow.js"></SCRIPT>
	<SCRIPT src="../../ColorDialog.js"></SCRIPT>
	<SCRIPT src="../../LineColorDialog.js"></SCRIPT>
	<SCRIPT src="../../BackgroundColorDialog.js"></SCRIPT>
	<SCRIPT src="../../EditPartFactory.js"></SCRIPT>
	<SCRIPT src="../../AbstractPalettePart.js"></SCRIPT>
	<SCRIPT src="../../ExternalPalette.js"></SCRIPT>
	<SCRIPT src="../../AbstractObjectModel.js"></SCRIPT>
	<SCRIPT src="../../AbstractConnectionModel.js"></SCRIPT>
	<SCRIPT src="../../PropertyChangeEvent.js"></SCRIPT>
	<SCRIPT src="../../GraphicalViewer.js"></SCRIPT>
	<SCRIPT src="../../Locator.js"></SCRIPT>
	<SCRIPT src="../../ConnectionLocator.js"></SCRIPT>
	<SCRIPT src="../../ManhattanMidpointLocator.js"></SCRIPT>
	<SCRIPT src="../../ManhattanMidpointLocator.js"></SCRIPT>
	<SCRIPT src="../../BezierMidpointLocator.js"></SCRIPT>
	<SCRIPT src="../../EditPartFactory.js"></SCRIPT>
	<SCRIPT src="../../AbstractObjectModel.js"></SCRIPT>
	<SCRIPT src="../../AbstractConnectionModel.js"></SCRIPT>
	<SCRIPT src="../../PropertyChangeEvent.js"></SCRIPT>
	<SCRIPT src="../../GraphicalViewer.js"></SCRIPT>
	<SCRIPT src="../../GraphicalEditor.js"></SCRIPT>

	<SCRIPT src="../../xmlsax.js"></SCRIPT>
	<SCRIPT src="../../xmlw3cdom.js"></SCRIPT>
	<SCRIPT src="../../XMLSerializer.js"></SCRIPT>
	<SCRIPT src="../../XMLDeserializer.js"></SCRIPT>
	<SCRIPT src="../../EditPolicy.js"></SCRIPT>
    <!-- undo/redo support (all times required too) -->
	<SCRIPT src="../../Command.js"></SCRIPT>
	<SCRIPT src="../../CommandStack.js"></SCRIPT>
	<SCRIPT src="../../CommandStackEvent.js"></SCRIPT>
	<SCRIPT src="../../CommandStackEventListener.js"></SCRIPT>
	<SCRIPT src="../../CommandAdd.js"></SCRIPT>
	<SCRIPT src="../../CommandDelete.js"></SCRIPT>
	<SCRIPT src="../../CommandMove.js"></SCRIPT>
	<SCRIPT src="../../CommandMoveLine.js"></SCRIPT>
	<SCRIPT src="../../CommandMovePort.js"></SCRIPT>
	<SCRIPT src="../../CommandResize.js"></SCRIPT>
	<SCRIPT src="../../CommandSetText.js"></SCRIPT>
	<SCRIPT src="../../CommandSetColor.js"></SCRIPT>
	<SCRIPT src="../../CommandSetBackgroundColor.js"></SCRIPT>
	<SCRIPT src="../../CommandConnect.js"></SCRIPT>
	<SCRIPT src="../../CommandReconnect.js"></SCRIPT>
	<SCRIPT src="../../Menu.js"></SCRIPT>
	<SCRIPT src="../../MenuItem.js"></SCRIPT>
	<SCRIPT src="../../mootools.js"></SCRIPT>
	<SCRIPT src="../../moocanvas.js"></SCRIPT>
    <!--REGEXP_END_REMOVE-->

    <SCRIPT src="./lib/prototype.js"></SCRIPT>
    <SCRIPT src="./lib/moo.fx.js"></SCRIPT>

    <SCRIPT src="./src/Configuration.js"></SCRIPT>
    <SCRIPT src="./src/util/tools.js"></SCRIPT>
    
    <SCRIPT src="./src/xml/ModelXMLDeserializer.js"></SCRIPT>
    <SCRIPT src="./src/xml/ModelXMLSerializer.js"></SCRIPT>
    
    <SCRIPT src="./src/NetworkCloudGraphicalEditorFactory.js"></SCRIPT>
    <SCRIPT src="./src/NetworkCloudGraphicalEditor.js"></SCRIPT>
    
    <SCRIPT src="./src/model/AbstractCloudNodeModel.js"></SCRIPT>
    <SCRIPT src="./src/model/RepresentationModel.js"></SCRIPT>
    <SCRIPT src="./src/model/VirtualNetworkCloudModel.js"></SCRIPT>
    <SCRIPT src="./src/model/ServerModel.js"></SCRIPT>
    <SCRIPT src="./src/model/ServerReferenceModel.js"></SCRIPT>
    <SCRIPT src="./src/model/SwitchModel.js"></SCRIPT>
    <SCRIPT src="./src/model/SwitchReferenceModel.js"></SCRIPT>
    <SCRIPT src="./src/model/StorageModel.js"></SCRIPT>
    <SCRIPT src="./src/model/StorageReferenceModel.js"></SCRIPT>
    <SCRIPT src="./src/model/ImageModel.js"></SCRIPT>
    <SCRIPT src="./src/model/ImagesModel.js"></SCRIPT>
    <SCRIPT src="./src/model/NicsModel.js"></SCRIPT>
    <SCRIPT src="./src/model/NicModel.js"></SCRIPT>
    <SCRIPT src="./src/model/NicReferenceModel.js"></SCRIPT>
    <SCRIPT src="./src/model/MountModel.js"></SCRIPT>
    <SCRIPT src="./src/model/NicConnectionModel.js"></SCRIPT>
    
    <SCRIPT src="./src/view/MountInputPort.js"></SCRIPT>
    <SCRIPT src="./src/view/MountOutputPort.js"></SCRIPT>
    <SCRIPT src="./src/view/NicOutputPort.js"></SCRIPT>
    <SCRIPT src="./src/view/NicInputPort.js"></SCRIPT>
    <SCRIPT src="./src/view/AbstractCloudNodeFigure.js"></SCRIPT>
    <SCRIPT src="./src/view/ServerFigure.js"></SCRIPT>
    <SCRIPT src="./src/view/StorageFigure.js"></SCRIPT>
    <SCRIPT src="./src/view/SwitchFigure.js"></SCRIPT>
    <SCRIPT src="./src/view/MountFigure.js"></SCRIPT>
    <SCRIPT src="./src/view/NicConnectionFigure.js"></SCRIPT>
    
    <SCRIPT src="./src/command/CommandAddSwitch.js"></SCRIPT>
    <SCRIPT src="./src/command/CommandAddServer.js"></SCRIPT>
    <SCRIPT src="./src/command/CommandAddStorage.js"></SCRIPT>
    <SCRIPT src="./src/command/CommandMoveCloudNode.js"></SCRIPT>
    <SCRIPT src="./src/command/CommandConnectMount.js"></SCRIPT>
    <SCRIPT src="./src/command/CommandDisconnectMount.js"></SCRIPT>
    <SCRIPT src="./src/command/CommandReconnectMount.js"></SCRIPT>
    <SCRIPT src="./src/command/CommandConnectNic.js"></SCRIPT>
    <SCRIPT src="./src/command/CommandDisconnectNic.js"></SCRIPT>
    <SCRIPT src="./src/command/CommandReconnectNic.js"></SCRIPT>
    <SCRIPT src="./src/command/CommandRemoveCloudNode.js"></SCRIPT>
    <SCRIPT src="./src/command/CommandChangeProperty.js"></SCRIPT>
    <SCRIPT src="./src/command/CommandAddImage.js"></SCRIPT>
    <SCRIPT src="./src/command/CommandRemoveImage.js"></SCRIPT>

    <SCRIPT src="./src/palette/ServerPalettePart.js"></SCRIPT>
    <SCRIPT src="./src/palette/SwitchPalettePart.js"></SCRIPT>
    <SCRIPT src="./src/palette/StoragePalettePart.js"></SCRIPT>

    <SCRIPT src="./src/dialog/FormDialog.js"></SCRIPT>
    <SCRIPT src="./src/dialog/AddImageDialog.js"></SCRIPT>

    <SCRIPT src="./src/menu/GenericButton.js"></SCRIPT>
    <SCRIPT src="./src/menu/ButtonDelete.js"></SCRIPT>
    <SCRIPT src="./src/menu/FlowMenu.js"></SCRIPT>

    <SCRIPT src="./src/toolbar/Toolbar.js"></SCRIPT>
    <SCRIPT src="./src/toolbar/AbstractToolbarButton.js"></SCRIPT>
    <SCRIPT src="./src/toolbar/ToolbarButtonGroup.js"></SCRIPT>
    <SCRIPT src="./src/toolbar/ToolbarButtonApply.js"></SCRIPT>
    <SCRIPT src="./src/toolbar/ToolbarButtonSave.js"></SCRIPT>
    <SCRIPT src="./src/toolbar/ToolbarButtonShowXML.js"></SCRIPT>
    <SCRIPT src="./src/toolbar/ToolbarButtonUndo.js"></SCRIPT>
    <SCRIPT src="./src/toolbar/ToolbarButtonRedo.js"></SCRIPT>

    <SCRIPT src="./src/property/PropertyPage.js"></SCRIPT>
    <SCRIPT src="./src/property/MountPropertyPage.js"></SCRIPT>
    <SCRIPT src="./src/property/NicPropertyPage.js"></SCRIPT>
    <SCRIPT src="./src/property/ServerPropertyPage.js"></SCRIPT>
    <SCRIPT src="./src/property/StoragePropertyPage.js"></SCRIPT>
    <SCRIPT src="./src/property/SwitchPropertyPage.js"></SCRIPT>
    <SCRIPT src="./src/property/DefaultPropertyPage.js"></SCRIPT>
    <SCRIPT src="./src/property/PropertyPanel.js"></SCRIPT>
</head>

<body id="body" onresize="resize()" onselectstart="return false;" style="overflow:hidden;margin:0px;padding:0px;" onkeydown="">

<div id="toolbar" style="position:absolute;top:0px;width:100%;" >
</div>

<div id="property_panel" style="position:absolute;" >
</div>

<div id="scrollarea" style="position:absolute;overflow:auto;" >
   <div id="paintarea" style="position:absolute;left:0px;top:0px;width:3000px;height:3000px" >
   </div>
</div>

<div id="object_panel" style="position:absolute" >
<div style="left: 0px; top: 0px; position: absolute;" class="panel_header">Network Object Palette</div>
</div>



<div>
  <div class="draw2d_window" id="dialog_add_image" style="display:none;border:1px solid black;width:570px;">
    <div class="jacob_window_middle">
      <div id="dialog_select_image_header" class="dialog_header"></div>
      <div id="dialog_select_image_images" class="dialog_content" style="height:300px;width:570px;overflow-y:scroll;">
      </div>
      <div class="dialog_buttonbar edit_buttonbar">
         <button class="button_normal draw2d_window_button_ok" >Select</button>
         <button class="button_normal draw2d_window_button_cancel" >Close</button>
      </div>
    </div>
  </div>
</div>

<script>

  var browserId="";
  
  // retrieve the id of the document to load
  var documentId = urlParam("xml");
  var editor=null;

  Event.observe(window, 'load', function()
  {
    draw2d.Drag.currentCompartment = null;
    // @see: ./util/tools.js
    loadDocument(documentId);
  });

function resize()
{
  var width = 0, height = 0;
  if( typeof( window.innerWidth ) == 'number' ) 
  {
    //Non-IE
    width = window.innerWidth;
    height = window.innerHeight;
  } 
  else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) 
  {
    //IE 6+ in 'standards compliant mode'
    width = document.documentElement.clientWidth;
    height = document.documentElement.clientHeight;
  } 
  else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) 
  {
    //IE 4 compatible
    width = document.body.clientWidth;
    height = document.body.clientHeight;
  }

  var toolbarPanel = $("toolbar");
  var objectPanel = $("object_panel");
  var propertyPanel = $("property_panel");
  var editorPanel= $("scrollarea");
  
  var tool_height = toolbarPanel.getHeight();
  var object_height = 200;
  
  editorPanel.style.width=Math.max(10,width-250)+"px";
  editorPanel.style.height = Math.max(10,height-tool_height)+"px";
  editorPanel.style.top = tool_height+"px";
  editorPanel.style.left = "252px";

  objectPanel.style.width="250px";
  objectPanel.style.height = object_height+"px";
  objectPanel.style.top = tool_height+"px";
  objectPanel.style.left = "0px";

  propertyPanel.style.top = (object_height+tool_height)+"px";
  propertyPanel.style.left = "0px";
  if(editor)
     editor.propertyPanel.setDimension(250,Math.max(10,height-object_height-tool_height));
}

</script>
</body>
</html>